<template>
	<view>
		<view class="title">当日销售</view>
		<view class="table">
			<scroll-view class="scroll" scroll-y="true" scroll-x="true" >
				<view class="head">
					<view class="head-item">商品名称</view>
					<view class="head-item">销售数量</view>
				</view>
				<view class="body" v-for="(item,index) in this.drxl" :key='index'>
					<view class="body-item">{{item.spmc}}</view>
					<view class="body-item">{{item.drxl}}</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default{
		data(){
			return{
				
			}
		},
		computed:{
			...mapState(['goodsInfor','drxl'])
		},
		onLoad(){
			console.log('daySale',this.goodsInfor)
		},
		methods:{
			
		}
	}
</script>

<style lang="scss">
	.title{
		margin: 15rpx auto;
		font-weight:bold;
		text-align: center;
		font-size: 35rpx;
	}
	.table{
		// border: 1rpx solid #f00;
		padding: 20rpx;
		.scroll{
			white-space: nowrap;
			border: 1rpx solid #bbb;
		}
		.head{
			display: flex;
			width: 100%;
		}
		.head-item{
			flex: 1;
			border: 1rpx solid #B2B2B2;
			text-align: center;
			margin: 3rpx;
			font-size: 25rpx;
			font-weight: bold;
			line-height: 80rpx;
			background-color: #fffaf0;
		}
		.content{
			// border: 1rpx solid #f00;
		}
		.body{
			display: flex;
			width: 100%;
		}
		.body-item{
			flex: 1;
			text-align: center;
			font-size: 25rpx;
			border: 1rpx solid #b2b2b2;
			margin: 3rpx;
			text-align: center;
			line-height: 70rpx;
		}
	}
</style>
